<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-marker
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
          charset="utf-8">

</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="file:///android_asset/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
-->

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);

     var language= null;
    function getlanguage(){
        var lang=null;
        if (navigator.appName == 'Netscape'){
            lang = navigator.language;
        }else{
            lang = navigator.browserLanguage;
        }
        if (lang.indexOf('en') > -1){
            language = "en"
          // alert("yingwen");
        }else if (lang.indexOf('zh') > -1){
            language = "zh-CN"
          // alert("zhongwen");
        }else{
            language = "en"
          // alert("yingwen");
        }
    }
    function getFontSize(time){
  return time*1.2
}
    getlanguage()

    var app = {};
    function upFixed (num, fix) {
      // num为原数字，fix是保留的小数位数
      let result = '0'
      if (Number(num) && fix > 0) { // 简单的做个判断
        fix = +fix || 2
        num = num + ''
        if (/e/.test(num)) { // 如果是包含e字符的数字直接返回
          result = num
        } else if (!/\./.test(num)) { // 如果没有小数点
          result = num + `.${Array(fix + 1).join('0')}`
        } else { // 如果有小数点
          num = num + `${Array(fix + 1).join('0')}`
          let reg = new RegExp(`-?\\d*\\.\\d{0,${fix}}`)
          let floorStr = reg.exec(num)[0]
          if (+floorStr >= +num) {
            result = floorStr
          } else {
            let floorNumber = +floorStr + +`0.${Array(fix).join('0')}1`
            let point = /\./.test(floorNumber + '') ? '' : '.'
            let floorStr2 = floorNumber + point + `${Array(fix + 1).join('0')}`
            result = reg.exec(floorStr2)[0]
          }
        }
      }
      return result
    }

    function downFixed (num, fix) {
      // num为原数字，fix是保留的小数位数
      let result = '0'
      if (Number(num) && fix > 0) { // 简单的做个判断
        fix = +fix || 2
        num = num + ''
        if (/e/.test(num)) { // 如果是包含e字符的数字直接返回
          result = num
        } else if (!/\./.test(num)) { // 如果没有小数点
          result = num + `.${Array(fix + 1).join('0')}`
        } else { // 如果有小数点
          num = num + `${Array(fix + 1).join('0')}`
          let reg = new RegExp(`-?\\d*.\\d{0,${fix}}`)
          result = reg.exec(num)[0]
        }
      }
      return result
    }
    function dateFormat(fmt, date) {
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }
    var option;
    function receiveDataFromOriginal(msg) {
<!--        alert(msg);-->
      let data = JSON.parse(msg);
      var series = [];
      var subId = data.subId;
      var markAreaData = [];
      var colorData = [];
      for (const key in data.offlineList) {
        if (data.offlineList.hasOwnProperty(key)) {
            const element = data.offlineList[key];
            markAreaData.push([{
              name: language == 'zh-CN' ?'离线':'Offline',
              xAxis: element.offlineStime,
              itemStyle: {
                color: 'rgba(255,34,34,0.1)',
              },
              label: {
                color: '#F64A4A',
                position: 'inside',
                fontSize: getFontSize(18),
              }
            }, {
              xAxis: element.offlineEtime
            }])
        }
      }

      colorData.push('#33cc66')
        series.push({
            name:   language == 'zh-CN' ?'实际值':'Avg value' ,
            type: 'line',
            smooth: true, //平滑曲线显示
            showSymbol: false,//去掉曲线上面的小圆圈
            data: data.dataList.map(item => {
              return [item.updateTimeStr,item.avgValue];
            }),
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ],
               label: {
            fontSize: getFontSize(18), // 设定文字大小

        }
            },
            markLine: {
              symbol: ['none', 'none'],//去掉箭头
              itemStyle: {
                normal: {
                  lineStyle: {
                    type: 'dashed',
                    color: '#195894'
                  },
                  label: {
                    show: false,
                    position: 'start'
                  }
                }
              },
              data: [{
                xAxis: data.startTime,
              }, {
                xAxis: data.endTime,
              }]
            },
            markArea:{
                silent: true,
                data: markAreaData
            }

          });
        colorData.push('#0066ff')
        series.push({
            name:  language == 'zh-CN' ?'目标值':'Tar',
            type: 'line',
            smooth: true, //平滑曲线显示
            showSymbol: false,
            data: data.dataList.map(item => {
                  return [item.updateTimeStr,item.tarValue];
            }),

          });
          if(subId!=0 && null!=data.sensorList){
            colorData.push('#FFAA00')
            series.push({
              name: language == 'zh-CN' ? '温度'+subId :'temp'+subId,
              type: 'line',
              smooth: true, //平滑曲线显示
              showSymbol: false,
              data: data.sensorList.map(item => {
                return [item.updateTimeStr,item.sensor];
              }),
             
            });
          }
          if(data.warnTypeName.indexOf('高')  != -1  || data.warnTypeName.indexOf('T HA') != -1) {

              colorData.push('#ff2222')
            series.push({
              name: language == 'zh-CN' ? '高报警值' :'High alarm',
              type: 'line',
              smooth: true, //平滑曲线显示
              showSymbol: false,
              data: data.dataList.map(item => {
                return [item.updateTimeStr,item.highWarn];
              }),
             
            });
          }
          if (data.warnTypeName.indexOf('低') != -1 || data.warnTypeName.indexOf('T LA') != -1) {
              colorData.push('#00ccff')
              series.push({
              name: language == 'zh-CN' ?  '低报警值' :'Low alarm'  ,
              type: 'line',
              smooth: true, //平滑曲线显示
              showSymbol: false,
              data: data.dataList.map(item => {
                return [item.updateTimeStr,item.lowWarn];
              }),
          
            });
          }
            if ((data.warnTypeName.indexOf('低')   == -1 && data.warnTypeName.indexOf('T LA') == -1 ) && (data.warnTypeName.indexOf('高') == -1 && data.warnTypeName.indexOf('T HA') == -1) ) {
                colorData.push('#ff2222')
                series.push({
                name: language == 'zh-CN' ?  '高报警值' :'High alarm',
                type: 'line',
                smooth: true, //平滑曲线显示
                showSymbol: false,
                data: data.dataList.map(item => {
                  return [item.updateTimeStr,item.highWarn];
                }),
           
              });
                colorData.push('#00ccff')
              series.push({
                name: language == 'zh-CN' ?     '低报警值' :'Low alarm'  ,
                type: 'line',
                smooth: true, //平滑曲线显示
                showSymbol: false,
                data: data.dataList.map(item => {
                  return [item.updateTimeStr,item.lowWarn];
                }),
          
              });
            }
      option = { 
        textStyle: {
        fontSize: getFontSize(18) // 设置全局文字大小
    },
      color:colorData,
      tooltip: {
        backgroundColor: 'rgba(255,255,255,0.5)',
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              fontSize: getFontSize(18)
            }
          },
        textStyle:{ fontSize: getFontSize(18)},
         trigger: 'axis',
         axisPointer: {
           type: 'shadow',
           label: {
             show: true
           }
         }
       },
      legend: {
        icon: 'circle',
   
        textStyle: {
            fontSize: getFontSize(18)
          }
      },
      grid: {
        left: getFontSize(80),
          right: getFontSize(20),
          top: getFontSize(50),
        bottom:getFontSize(30),
      },
      xAxis:{
        type: 'category',
        data: data.dateList,
        axisTick: {
          show: false //隐藏X轴刻度
        },
        axisLine: {
          show: false //隐藏X轴轴线
        },
        
        axisLabel: {
          fontSize: getFontSize(14),
          show: true,
        },
        splitLine: {
          //去除网格线
          show: false
        },
        splitArea: { show: false } //去除网格区域
      },
      yAxis: {
        axisLabel: {
              fontSize: getFontSize(18)
            },
        type: 'value',
        min: function(value) {return downFixed(value.min- (value.max-value.min)*0.05,1) ;},
        max:function(value) {return upFixed(value.max+ (value.max-value.min)*0.05, 1) ;},
      },
      series: series
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

  }


</script>
</body>
</html>
    
